<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Switch 开关 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col-md-6">
            <!--begin::Portlet-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            基础
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Form-->
                    <form class="e-form">
                        <div class="form-group row">
                            <label class="col-3 col-form-label">默认</label>
                            <div class="col-3">
                                <span class="e-switch">
                                    <label>
                                        <input type="checkbox" checked="checked" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                            <label class="col-3 col-form-label">使用图标</label>
                            <div class="col-3">
                                <span class="e-switch e-switch--icon">
                                    <label>
                                        <input type="checkbox" checked="checked" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">未选中</label>
                            <div class="col-3">
                                <span class="e-switch">
                                    <label>
                                        <input type="checkbox" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                            <label class="col-3 col-form-label">未选中</label>
                            <div class="col-3">
                                <span class="e-switch e-switch--icon">
                                    <label>
                                        <input type="checkbox" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Disabled</label>
                            <div class="col-3">
                                <span class="e-switch">
                                    <label>
                                        <input type="checkbox" disabled="" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                            <label class="col-3 col-form-label">Disabled</label>
                            <div class="col-3">
                                <span class="e-switch e-switch--icon">
                                    <label>
                                        <input type="checkbox" disabled="" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                        </div>
                    </form>
                    <!--end::Form-->
                </div>
            </div>
            <!--end::Portlet-->
            <!--begin::Portlet-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            尺寸
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Section-->
                    <div class="e-section e-section--last">
                        <div class="e-section-info">你可以在<code>.e-switch</code>上添加<code>.e-switch--lg</code>设置使用大尺寸</div>
                        <div class="e-section-content">
                            <!--begin::Form-->
                            <form class="e-form">
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">默认</label>
                                    <div class="col-3">
                                        <span class="e-switch e-switch--lg">
                                            <label>
                                                <input type="checkbox" checked="checked" name="">
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                    <label class="col-3 col-form-label">使用图标</label>
                                    <div class="col-3">
                                        <span class="e-switch e-switch--lg e-switch--icon">
                                            <label>
                                                <input type="checkbox" checked="checked" name="">
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">未选中</label>
                                    <div class="col-3">
                                        <span class="e-switch e-switch--lg">
                                            <label>
                                                <input type="checkbox" name="">
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                    <label class="col-3 col-form-label">未选中</label>
                                    <div class="col-3">
                                        <span class="e-switch e-switch--lg e-switch--icon">
                                            <label>
                                                <input type="checkbox" name="">
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">Disabled</label>
                                    <div class="col-3">
                                        <span class="e-switch e-switch--lg">
                                            <label>
                                                <input type="checkbox" disabled="" name="">
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                    <label class="col-3 col-form-label">Disabled</label>
                                    <div class="col-3">
                                        <span class="e-switch e-switch--lg e-switch--icon">
                                            <label>
                                                <input type="checkbox" disabled="" name="">
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                </div>
                            </form>
                            <!--end::Form-->
                        </div>

                        <div class="e-section-info">你可以在<code>.e-switch</code>上添加<code>.e-switch--sm</code>设置使用小尺寸</div>
                        <div class="e-section-content">
                            <!--begin::Form-->
                            <form class="e-form">
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">默认</label>
                                    <div class="col-3">
                                        <span class="e-switch e-switch--sm">
                                            <label>
                                                <input type="checkbox" checked="checked" name="">
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                    <label class="col-3 col-form-label">使用图标</label>
                                    <div class="col-3">
                                        <span class="e-switch e-switch--sm e-switch--icon">
                                            <label>
                                                <input type="checkbox" checked="checked" name="">
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">未选中</label>
                                    <div class="col-3">
                                        <span class="e-switch e-switch--sm">
                                            <label>
                                                <input type="checkbox" name="">
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                    <label class="col-3 col-form-label">未选中</label>
                                    <div class="col-3">
                                        <span class="e-switch e-switch--sm e-switch--icon">
                                            <label>
                                                <input type="checkbox" name="">
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                </div>
                                <div class="form-group row">
                                        <label class="col-3 col-form-label">Disabled</label>
                                    <div class="col-3">
                                        <span class="e-switch e-switch--sm">
                                            <label>
                                                <input type="checkbox" disabled="" name="">
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                    <label class="col-3 col-form-label">Disabled</label>
                                    <div class="col-3">
                                        <span class="e-switch e-switch--sm e-switch--icon">
                                            <label>
                                                <input type="checkbox" disabled="" name="">
                                                <span></span>
                                            </label>
                                        </span>
                                    </div>
                                </div>
                            </form>
                            <!--end::Form-->
                        </div>
                    </div>
                    <!--end::Section-->
                </div>
            </div>
            <!--end::Portlet-->
        </div>
        <div class="col-md-6">

            <!--begin::Portlet-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            背景色
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Form-->
                    <form class="e-form">
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Success</label>
                            <div class="col-3">
                                <span class="e-switch e-switch-success">
                                    <label>
                                        <input type="checkbox" checked="checked" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                            <label class="col-3 col-form-label">Primary</label>
                            <div class="col-3">
                                <span class="e-switch e-switch-primary">
                                    <label>
                                        <input type="checkbox" checked="checked" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Info</label>
                            <div class="col-3">
                                <span class="e-switch e-switch-info">
                                    <label>
                                        <input type="checkbox" checked="checked" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                            <label class="col-3 col-form-label">Danger</label>
                            <div class="col-3">
                                <span class="e-switch e-switch-danger">
                                    <label>
                                        <input type="checkbox" checked="checked" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Brand</label>
                            <div class="col-3">
                                <span class="e-switch e-switch-brand">
                                    <label>
                                        <input type="checkbox" checked="checked" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                            <label class="col-3 col-form-label">Dark</label>
                            <div class="col-3">
                                <span class="e-switch e-switch-dark">
                                    <label>
                                        <input type="checkbox" checked="checked" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                        </div>
                    </form>
                    <!--end::Form-->
                </div>
            </div>
            <!--end::Portlet-->

            <!--begin::Portlet-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            边框
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <!--begin::Form-->
                    <form class="e-form">
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Success</label>
                            <div class="col-3">
                                <span class="e-switch e-switch--outline e-switch--icon e-switch-success">
                                    <label>
                                        <input type="checkbox" checked="checked" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                            <label class="col-3 col-form-label">Warning</label>
                            <div class="col-3">
                                <span class="e-switch e-switch--outline e-switch--icon e-switch-warning">
                                    <label>
                                        <input type="checkbox" checked="checked" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Info</label>
                            <div class="col-3">
                                <span class="e-switch e-switch--outline e-switch--icon e-switch-info">
                                    <label>
                                        <input type="checkbox" checked="checked" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                            <label class="col-3 col-form-label">Danger</label>
                                <div class="col-3">
                                    <span class="e-switch e-switch--outline e-switch--icon e-switch-danger">
                                        <label>
                                            <input type="checkbox" checked="checked" name="">
                                            <span></span>
                                        </label>
                                </span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-3 col-form-label">Primary</label>
                            <div class="col-3">
                                <span class="e-switch e-switch--outline e-switch--icon e-switch-primary">
                                    <label>
                                        <input type="checkbox" checked="checked" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                            <label class="col-3 col-form-label">Brand</label>
                            <div class="col-3">
                                <span class="e-switch e-switch--outline e-switch--icon e-switch-brand">
                                    <label>
                                        <input type="checkbox" checked="checked" name="">
                                        <span></span>
                                    </label>
                                </span>
                            </div>
                        </div>
                    </form>
                    <!--end::Form-->
                </div>
            </div>
            <!--end::Portlet-->
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>